<template>
  <div>
    <el-card style="padding: 0.5em">
      <p style="color: #7a7a7a; font-size: 0.9em">分类</p>
      <div
        v-for="(item, index) in list"
        :key="index"
        style="margin-bottom: 0.8em"
      >
        <classify-label :title="item.classifyName" :num="item.articleNum"></classify-label>
        <ul v-if="item.childList.length != 0">
          <li
            v-for="(child, i) in item.childList"
            :key="i"
            style="margin-bottom: 0.5em"
          >
            <classify-label :title="child.classifyName" :num="child.articleNum"
              ></classify-label
            >
            <ul v-if="child.childList.length != 0">
              <li v-for="(c, ii) in child.childList" :key="ii">
                <classify-label :title="c.classifyName" :num="c.articleNum"
                  ></classify-label
                >
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </el-card>
  </div>
</template>
<script>
import ClassifyLabel from "./ClassifyLabel.vue";
export default {
  components: {
    ClassifyLabel,
  },
  name: "",
  data() {
    return {
      list: [
        {
          classifyName: "Java面试题",
          articleNum: "123",
          url: "123",
          childList: [],
        }
      ]
    };
  },
  methods: {
    async getClassifyList() {
      let res = await this.$http.get("/classify/all")
      if (res.statusCode == 200) {
        this.list = res.data
      }
    }
  },
  mounted() {
    this.getClassifyList()
  }
};
</script>
<style scoped>
li {
  list-style: none;
  width: 100%;
}
ul {
  border-left: 0.1em solid rgb(219, 219, 219);
  display: inline-block;
  padding-top: 0;
  width: calc(100% - 2.6em);
  padding-left: 20px;
  margin-top: 0.2em;
  padding-left: 2em;
  margin-left: 0.5em;
}

.btn:hover {
  background-color: #f4f4f4;
}
</style>